<script>
import { Plus, Delete, Search, List, Select } from "@element-plus/icons-vue";
import { getStudentList } from "../../api/class";
import { ElMessage } from 'element-plus'
// 导入添加题目的组件
import AddQuesCom from "../../components/AddQuesCom.vue";
export default {
    data() {
        return {
            // 发布题目的附加提示信息
            title: '',
            suggest: '',
            quesType: '',
            quesLevel: '',
            answerTime: '',
            pushType: '2',
            pushDate: '',
            pushTime: '',
            // 当前页面选择的所有题目
            chooseQues: [],
            // 分页后的题目列表
            currentQues: [],
            // 分页器页码
            currentPage: 1,
            // 选择班级和学生
            classSelect: '2210',
            studentId: '',
            // 学生列表
            tableData: [],
            selectAll: false,
            // 点击添加题目后的抽屉
            drawer: false,
        }
    },
    mounted() {
        this.getWantList();
    },
    components: {
        Plus,
        Delete,
        Search,
        List,
        Select,
        AddQuesCom,
    },
    methods: {
        // 筛选班级和学生
        getWantList() {
            getStudentList({
                className: this.classSelect,
                id: this.studentId
            }).then(res => {
                if (res.code == '200') {
                    this.tableData = res.data;
                } else {
                    ElMessage(res.msg)
                }
            })
        },

        // 单选
        selectStu(row) {
            row.isSelect = !row.isSelect;
            if (this.tableData.some(item => {
                return item.isSelect == false
            })) {
                this.selectAll = false
            }
        },
        // 全选
        select() {
            this.selectAll = !this.selectAll;
            this.tableData.forEach(item => {
                item.isSelect = this.selectAll
            })
        },

        // 添加题目
        addQues() {
            this.drawer = true;
        },
        // 全部删除
        removeQues() {

        },

        // 查看题目详情
        checkQuesInfo(row) {

        },
        // 删除一道题目
        removeQues(row) {

        },
        // 分页器页码改变触发事件
        changeData() {

        },
        // 子组件传来的选中的题目
        addallques(list){
            // 父组件定义的这个方法会通过子组件的$emit实现监听
            // 不需要父组件主动出发这个事件
            this.chooseQues=list;
            console.log(this.chooseQues);
        },

    },
    computed: {
        titleColor() {
            return this.title.length == 0 ? 'red' : 'black'
        },
        suggestColor() {
            return this.suggest.length == 0 ? 'red' : 'black'
        }
    }
}
</script>
<template>
    <div class="question">
        <div class="top">
            <div class="left">
                <div class="title">
                    <p><span class="show1">*</span>
                        <span>标题</span>
                    </p>

                    <el-input v-model="title" />
                </div>
                <div class="suggest">
                    <p>
                        <span class="show2">*</span>
                        <span>建议</span>
                    </p>

                    <el-input v-model="suggest" />
                </div>
                <div>
                    <label for="">选择科目</label>
                    <el-select v-model="quesType" placeholder=" ">
                        <el-option value="离散分析" />
                        <el-option value="线性代数" />
                        <el-option value="微积分" />
                        <el-option value="高等数学" />
                        <el-option value="前端HTML5" />
                    </el-select>
                </div>
                <div>
                    <label for="">作业星级</label>
                    <el-select v-model="quesLevel" placeholder=" ">
                        <el-option value="五星" />
                        <el-option value="四星" />
                        <el-option value="三星" />
                        <el-option value="二星" />
                        <el-option value="一星" />
                    </el-select>
                </div>
                <div>
                    <label for="">答题时间</label>
                    <el-input v-model="answerTime" />
                </div>
                <div>
                    <label for="">发布类型</label>
                    <!-- pushType 会根据选择的不同显示 1 或者 2 -->
                    <el-radio-group v-model="pushType" class="ml-4">
                        <el-radio label="1" size="large">立即发布</el-radio>
                        <el-radio label="2" size="large">延时发布</el-radio>
                    </el-radio-group>
                </div>
                <div>
                    <!-- 发布时间 -->
                    发布时间
                    <el-date-picker style="width:100px" v-model="pushDate" type="date" :disabled="pushType === '1'" />
                    <el-time-picker style="width:100px" v-model="pushTime" :disabled="pushType === '1'" />
                    <!-- disabled-date 可以用来做验证，只有日期超过今天才能使用，否则禁用 -->
                    <!-- :prefix-icon="customPrefix" 自定义前缀图标 -->
                </div>
                <div class="submit">
                    <el-button type="primary" @click="addQues">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        添加题目
                    </el-button>
                    <el-button type="danger" @click="removeQues">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        全部删除
                    </el-button>
                    <span class="box">
                        已选题目数量：{{ chooseQues.length }}
                    </span>
                </div>
                <el-drawer v-model="drawer" title="• 添加题目" :size="800" >
                    <!-- 通过监听自定义事件来获取子组件传递的参数 -->
                    <AddQuesCom @addall="addallques" :falg="drawer"></AddQuesCom>
                </el-drawer>
            </div>
            <div class="right">
                <div class="r-1">
                    <label for="">发送班级</label>
                    <el-select v-model="classSelect" style="width: 115px" placeholder=" ">
                        <el-option value="2210" />
                        <el-option value="2211" />
                        <el-option value="2212" />
                        <el-option value="2213" />
                        <el-option value="2214" />
                        <el-option value="2215" />
                    </el-select>
                    <el-input class="stuid" v-model="studentId" placeholder="搜索学员ID或学员昵称">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                    <el-button class="btn" @click="getWantList">
                        <el-icon>
                            <List />
                        </el-icon>查询
                    </el-button>
                </div>
                <el-table :data="tableData">
                    <el-table-column label="选择对象" width="180">
                        <template #default="scope">
                            <div style="border:1px solid #ccc;width:20px;height:20px;">
                                <div @click="selectStu(scope.row)">
                                    <el-icon v-show="scope.row.isSelect"><Select /></el-icon>
                                    <div style="width:20px;height:20px;" v-show="!scope.row.isSelect"></div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stuId" label="学员ID" width="180" />
                    <el-table-column prop="stuNickname" label="学员昵称" width="180" />
                    <el-table-column prop="stuTel" label="联系电话" width="180" />
                </el-table>
                <div class="selectAll">
                    <div style="border:1px solid #ccc;width:20px;height:20px;" @click="select">
                        <el-icon v-show="selectAll"><Select /></el-icon>
                        <div style="width:20px;height:20px;" v-show="!selectAll"></div>
                    </div>
                    <span>选择该班所有学生</span>
                </div>
            </div>
        </div>
        <div class="bottom">
            <el-table :data="chooseQues">
                <el-table-column label="已选题目" width="80">1</el-table-column>
                <el-table-column prop="quesId" label="题目id" width="180" />
                <el-table-column prop="quesContent" label="题目内容" width="180" />
                <!-- show-overflow-tooltip  内容过长显示tooltip -->
                <el-table-column prop="quesFrom" label="题目来源" width="180" />
                <el-table-column prop="probability" label="全网正确率" width="80" />
                <el-table-column label="操作" class="check">
                    <template #default="scope">
                        <div>
                            <span class="check" @click="checkQuesInfo(scope.row)">查看详情</span>
                            &emsp;
                            <span class="check" @click="removeQues(scope.row)">删除题目</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <el-button type="primary">发布</el-button>
            </div>
            <el-pagination v-model:current-page="currentPage" @currentChange="changeData"
                layout="prev, pager, next, jumper" :total="chooseQues.length" />
        </div>
    </div>
</template>
<style lang="scss" scoped>
.question {
    color: black;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 400px;
        display: flex;

        .left {
            width: 400px;
            height: 100%;
            box-sizing: border-box;
            margin: 10px;
            display: flex;
            flex-direction: column;

            div {
                display: flex;
                margin: 3px 10px;

                align-items: center;
                justify-content: space-between;

                .el-input {
                    width: 200px;
                }
            }

            .submit {
                margin-top: 20px;
            }
        }

        .right {
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;

            .r-1 {
                display: flex;
                line-height: 30px;
                justify-content: space-evenly;

                .stuid {
                    width: 200px;
                }
            }

            .el-table {
                height: 300px;
            }

            .selectAll {
                display: flex;
                justify-content: end;
                align-items: center;
                margin: 20px 50px 0 0;
            }
        }
    }

    .bottom {
        width: 100%;
        flex: 1;
    }
}

//控制 标题建议的样式变化
.show1 {
    color: v-bind(titleColor);

}

.show2 {
    color: v-bind(suggestColor);
}
</style>